<template>
  <div>
    <div>
      <el-input placeholder="请输入要查询的姓名" v-model="name" suffix-icon="el-icon-search"
                @keyup.enter.native="loadPost" style="width: 200px"></el-input>
      <el-button type="primary" style="margin-left:5px" @click="loadPost">查询</el-button>
      <el-button type="success" @click="loadempty">重置</el-button>
      <el-button type="warning" @click="add">新增</el-button>
    </div>
    <!--    下拉框组件-->
    <el-table :data="tableData"
              border
              :header-cell-style="{background:'rgba(34,51,229,0.17)',color:'rgb(7,1,1)'}"
              style="margin-top: 5px;border-radius: 10px"
    >
      <el-table-column prop="loginId" label="账号" width="140">
      </el-table-column>
      <el-table-column prop="reaName" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="loginPassword" label="密码">
      </el-table-column>
      <el-table-column prop="identity" label="角色">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.identity === '超级管理员' ? 'danger' : 'success'"
              disable-transitions>{{ scope.row.identity }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.sex === '男' ? 'primary' : 'success'"
              disable-transitions>{{ scope.row.sex }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="loginPassword" label="操作">
        <template slot-scope="scope">
          <el-button :type="'primary'" size="small" @click="mod(scope.row)">编辑</el-button>
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="此用户信息确定删除吗？"
              @confirm="deleteIs(scope.row.id)"
          >
            <el-button slot="reference" :type="'danger'" size="small" style="margin-left: 10px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页功能组件-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--      对话框 表单组件   -->
    <el-dialog v-dialogDrag
               :before-close="resetform"
               name="dialog"
               title="请 输 入 角 色 信 息"
               :visible.sync="centerDialogVisible"
               width="30%"
               center>
      <el-form size="small" :rules="rules" :model="from" ref="from">
        <span>用户权限</span><br>
        <el-radio-group v-model="from.identity" style="margin-bottom: 10px;margin-top: 20px">
          <el-radio label="普通账号"></el-radio>
          <el-radio label="超级管理员"></el-radio>
        </el-radio-group>
        <el-form-item size="small" label="账号" prop="loginId">
          <el-input minlength="5" required="required" type="text" v-model="from.loginId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item size="small" label="姓名" prop="reaName">
          <el-input type="text" v-model="from.reaName" required="required" autocomplete="off"></el-input>
        </el-form-item>
        <el-radio-group v-model="from.sex" style="margin-bottom: 10px">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
        <el-form-item size="small" label="密码" prop="loginPassword">
          <el-input autocomplete="off" v-model="from.loginPassword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="save" @keyup.enter="save">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      inti:0,
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      total: 4,
      name: '',
      //弹出表单
      centerDialogVisible: false,
      from: {
        //id
        id:null,
        //账号
        loginId: null,
        //姓名
        reaName: null,
        //密码
        loginPassword: null,
        //身份
        identity: null,
        //性别
        sex: null,
        //密码验证
        twologinPassword: null,
      },
      //设置表单提交每个字段限制格式
      rules: {
        loginId: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 5, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        reaName: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 2, max: 8, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        loginPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 11, message: '长度在 5 到 20 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    //编辑功能，点击编辑在表单上进行修改
    mod(row){
      this.inti=1
      this.centerDialogVisible = true
      this.from=row
      this.from.identity=row.identity+''
      this.from.sex=row.sex+''
    },
    //新增完成后清空表单
    resetform(done) {
      this.$refs.from.resetFields();
      centerDialogVisible: true
      this.loadPost();
      done();
    },
    //删除对象
    deleteIs(loginId) {
      console.log(loginId)
      this.$axios.get(this.$httpUrl + '/delete?id='+loginId)
      this.loadPost()
    },
    //添加方法
    add() {
      //关闭表单
      this.centerDialogVisible = true
      //清空表单
      this.$nextTick(() =>
          this.resetForm()
      )
    },
    //新增
    save() {
      this.$refs.from.validate((valid) => {
        if (valid && this.from.sex != '' && this.from.identity != '') {
            this.$axios.get(this.$httpUrl + '/loginId?loginid=' + this.from.loginId).then(res => res.data).then(res => {
              if (res.code == 200&&this.inti==1) {
                this.$axios.post(this.$httpUrl+'/update',this.from).then(res => res.data).then(res => {
                  if (res.code == 200) {
                    this.$message({
                      message: '操作成功！',
                      type: 'success',
                    });
                  }})
               }else if(res.code == 200&&this.inti==0){
                this.from.loginPassword = ''
                this.from.twologinPassword = ''
                this.$message({
                  message: '该用户账号已存在！请勿重复添加',
                  type: 'error',
                })}
               else {
                this.$axios.post(this.$httpUrl + '/save', this.from).then(res => res.data).then(res => {
                  console.log(res);
                  if (res.code == 200) {
                    this.$message({
                      message: '操作成功！',
                      type: 'success',
                    });
                    this.centerDialogVisible = false
                    this.resetform()
                  } else {
                    return false;
                  }
                })
              }
            })}
        else {
          this.$message({
            message: '请检查信息是否填写完整(用户权限和用户性别),',
            type: 'error'
          })
        }
      })

    },
    //分页功能
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //设置默认页
      this.pageNum = 1
      this.pageSize = val;
      //重新调用方法刷新
      this.loadPost()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      //重新调用方法刷新
      this.loadPost()
    },
    // 获取数据
    loadGet() {
      this.$axios.get(this.$httpUrl + '/loginId?loginid=' + this.from.loginId).then(res => res.data).then(res => {
        if (res.code = 200) {
        }
      })
    },
    loadPost() {
      this.$axios.post(this.$httpUrl + '/listPage', {
        //传值给后端进行值的覆盖
        pagesize: this.pageSize,
        pagenum: this.pageNum,
        param: {
          name: this.name
        }
      }).then(res => res.data).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.data
          this.total = res.total
        } else {
          alert("数据获取失败")
        }
      })
    },
    //重置方法
    loadempty() {
      this.name = ''
      this.handleCurrentChange()
    },
    resetForm() {
      this.from.loginId = ''
      this.from.reaName = ''
      this.from.loginPassword = ''
      this.from.identity = ''
      this.from.sex = ""
      this.from.twologinPassword = ''
    },

  },
  //钩子函数，创造完成后就显示出来
  beforeMount() {
    this.loadPost();
  }
}

</script>

<style scoped>
.el-button--warning {
  background: rgb(186, 206, 97);
}

.el-button--warning:hover {
  color: #e7ffe8;
  background: rgb(212, 231, 96) !important;;
}

</style>